<template>
  <section>
    <div class="contractContainer">
      <header>附表1</header>
      <p class="listtTitle">房屋交接及设备清单</p>
      <table class="furnitureDetails" >
        <tr class="furnitureTitle">
          <td>设备、物品名称</td>
          <td>品牌</td>
          <td>数量</td>
          <td>备注</td>
        </tr>   
        <tr v-for="(item, index) in facility" :key="index">
          <td>{{item}}</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
       
     </table>
     <p class="listClear">双方确认无异议，上述所列的房屋内设备移交乙方使用。</p>
     <p class="listClear">本合同租赁期满，双方确认无异议，上述所列房屋内设备移交甲方。</p>
    </div>
  </section>
</template>
<script>
export default {
  props: ['contractDetail'],
  data () {
    return {
    }
  },
  methods: {
  },
  computed: {
    facility () {
      return JSON.parse(this.contractDetail.apartment.facility || '{}') || []
    }
  }
}
</script>
<style lang="less" scoped>
 section{
    width: 100%;
    height: 100%;
    line-height:1;
    overflow:scroll;
  }
  .contractContainer{
    position: relative;
    margin:20px;
  }
  .listtTitle{
    display: block;
    text-align: center;
    margin-top:0.5rem;
    margin-bottom:0.5rem;
    font-weight: 500;
    font-size: 1rem;
    
  }
  .furnitureDetails{
  width: 100%;
  text-align: center;
  border-collapse:collapse;
   border-top:1px solid black;
    border-left:1px solid black;
  }
  .furnitureTitle{
    width: 100%;
    font-weight:700;
  }
  .furnitureDetails>tr{
      display: flex;
  }
  .furnitureDetails>tr>td{
    height:40px;
    width:25%;
    line-height: 2rem;
    display:inline-block;
    font-size:0.8rem;
    border-right:1px solid black;
    border-bottom:1px solid black;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
.listClear{
  font-size:0.8rem;
  margin-top:0.5rem;
}
</style>

